<template>
  <div class="insurance-report">
    <el-card class="report-card">
      <div slot="header" class="card-header">
        <span class="card-title">保险购买统计</span>
        <el-button-group class="header-actions">
          <el-button size="mini" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
          <el-button size="mini" icon="el-icon-download" @click="exportData">导出</el-button>
        </el-button-group>
      </div>

      <!-- 保险购买率统计 -->
      <div class="statistics-section">
        <h3 class="section-title">保险购买率统计</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="rate-card overall-rate">
              <div class="rate-header">
                <span class="rate-title">总体购买率</span>
                <el-tag :type="getRateTagType(overallPurchaseRate)" size="small">
                  {{ getRateStatusText(overallPurchaseRate) }}
                </el-tag>
              </div>
              <div class="rate-value">
                <span class="rate-number">{{ overallPurchaseRate }}</span>
                <span class="rate-unit">%</span>
              </div>
              <div class="rate-progress">
                <el-progress 
                  type="circle" 
                  :percentage="overallPurchaseRate" 
                  :color="getProgressColor(overallPurchaseRate)"
                  :stroke-width="8"
                  :width="80">
                </el-progress>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="region-rate-list">
              <div class="region-rate-item" v-for="item in regionPurchaseRates" :key="item.regionId">
                <div class="region-info">
                  <span class="region-name">{{ item.regionName }}</span>
                  <span class="region-count">{{ item.totalCampusCount }}个校区</span>
                </div>
                <div class="region-progress">
                  <el-progress 
                    :percentage="item.purchaseRate" 
                    :color="getProgressColor(item.purchaseRate)"
                    :stroke-width="6">
                  </el-progress>
                </div>
                <div class="region-stats">
                  <span class="purchased-count">{{ item.purchasedCampusCount }}</span>
                  <span class="rate-text">{{ item.purchaseRate }}%</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 保险类型分布 -->
      <div class="statistics-section">
        <h3 class="section-title">保险类型分布</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="chart-container">
              <div ref="typePieChart" style="height: 300px;"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="type-statistics">
              <div class="type-item" v-for="item in insuranceTypeDistribution" :key="item.typeCode">
                <div class="type-header">
                  <span class="type-name">{{ item.typeName }}</span>
                  <span class="type-amount">¥{{ formatAmount(item.totalAmount) }}</span>
                </div>
                <div class="type-info">
                  <span class="type-count">{{ item.purchaseCount }}单</span>
                  <span class="type-rate">占比{{ item.percentage }}%</span>
                </div>
                <el-progress 
                  :percentage="item.percentage" 
                  :color="getTypeColor(item.typeCode)"
                  :stroke-width="6">
                </el-progress>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 保险金额统计 -->
      <div class="statistics-section">
        <h3 class="section-title">保险金额统计</h3>
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="amount-chart">
              <div ref="amountBarChart" style="height: 300px;"></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="amount-summary">
              <div class="summary-item">
                <span class="summary-label">总保费</span>
                <span class="summary-value">¥{{ formatAmount(totalPremium) }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">平均保费</span>
                <span class="summary-value">¥{{ formatAmount(averagePremium) }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">最高保费</span>
                <span class="summary-value">¥{{ formatAmount(maxPremium) }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">最低保费</span>
                <span class="summary-value">¥{{ formatAmount(minPremium) }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 保险到期提醒 -->
      <div class="statistics-section">
        <h3 class="section-title">保险到期提醒</h3>
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="即将到期" name="expiring">
            <el-table :data="expiringInsuranceList" style="width: 100%" stripe>
              <el-table-column prop="campusName" label="校区名称" width="150" />
              <el-table-column prop="insuranceType" label="保险类型" width="120" />
              <el-table-column prop="policyNumber" label="保单号" width="120" />
              <el-table-column prop="coverageAmount" label="保额" width="100" align="right">
                <template slot-scope="scope">
                  ¥{{ formatAmount(scope.row.coverageAmount) }}
                </template>
              </el-table-column>
              <el-table-column prop="premiumAmount" label="保费" width="100" align="right">
                <template slot-scope="scope">
                  ¥{{ formatAmount(scope.row.premiumAmount) }}
                </template>
              </el-table-column>
              <el-table-column prop="expirationDate" label="到期日期" width="120" />
              <el-table-column prop="remainingDays" label="剩余天数" width="100" align="center">
                <template slot-scope="scope">
                  <el-tag 
                    :type="getRemainingDaysType(scope.row.remainingDays)" 
                    size="mini">
                    {{ scope.row.remainingDays }}天
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="handleRenewal(scope.row)">
                    续保
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="已到期" name="expired">
            <el-table :data="expiredInsuranceList" style="width: 100%" stripe>
              <el-table-column prop="campusName" label="校区名称" width="150" />
              <el-table-column prop="insuranceType" label="保险类型" width="120" />
              <el-table-column prop="policyNumber" label="保单号" width="120" />
              <el-table-column prop="expirationDate" label="到期日期" width="120" />
              <el-table-column prop="overdueDays" label="逾期天数" width="100" align="center">
                <template slot-scope="scope">
                  <el-tag type="danger" size="mini">
                    {{ scope.row.overdueDays }}天
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="contactPerson" label="联系人" width="100" />
              <el-table-column prop="contactPhone" label="联系电话" width="120" />
              <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="handleContact(scope.row)">
                    联系
                  </el-button>
                  <el-button size="mini" type="text" @click="handleRenewal(scope.row)">
                    续保
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

    <!-- 续保对话框 -->
    <el-dialog
      title="保险续保"
      :visible.sync="renewalDialogVisible"
      width="500px">
      <el-form :model="renewalForm" label-width="100px">
        <el-form-item label="校区名称">
          <el-input v-model="renewalForm.campusName" disabled />
        </el-form-item>
        <el-form-item label="保险类型">
          <el-select v-model="renewalForm.insuranceType" style="width: 100%">
            <el-option 
              v-for="item in insuranceTypeOptions" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="保险期限">
          <el-select v-model="renewalForm.duration" style="width: 100%">
            <el-option label="1年" value="1" />
            <el-option label="2年" value="2" />
            <el-option label="3年" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="保费金额">
          <el-input-number 
            v-model="renewalForm.premiumAmount" 
            :min="0" 
            :precision="2" 
            style="width: 100%">
          </el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="renewalDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRenewal">确定续保</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'InsuranceReport',
  
  props: {
    queryForm: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      // 总体购买率
      overallPurchaseRate: 0,
      // 区域购买率数据
      regionPurchaseRates: [],
      // 保险类型分布数据
      insuranceTypeDistribution: [],
      // 金额统计数据
      amountStatistics: [],
      // 即将到期保险列表
      expiringInsuranceList: [],
      // 已到期保险列表
      expiredInsuranceList: [],
      // 当前激活的标签页
      activeTab: 'expiring',
      // 续保对话框显示状态
      renewalDialogVisible: false,
      // 续保表单
      renewalForm: {
        campusName: '',
        insuranceType: '',
        duration: '1',
        premiumAmount: 0
      },
      // 保险类型选项
      insuranceTypeOptions: [
        { value: 'property', label: '财产险' },
        { value: 'liability', label: '责任险' },
        { value: 'accident', label: '意外险' },
        { value: 'comprehensive', label: '综合险' }
      ],
      // 图表实例
      typePieChart: null,
      amountBarChart: null
    }
  },

  computed: {
    /**
     * 计算总保费
     */
    totalPremium() {
      return this.insuranceTypeDistribution.reduce((total, item) => {
        return total + item.totalAmount
      }, 0)
    },

    /**
     * 计算平均保费
     */
    averagePremium() {
      const totalCount = this.insuranceTypeDistribution.reduce((count, item) => {
        return count + item.purchaseCount
      }, 0)
      return totalCount > 0 ? this.totalPremium / totalCount : 0
    },

    /**
     * 计算最高保费
     */
    maxPremium() {
      return this.amountStatistics.length > 0 ? Math.max(...this.amountStatistics.map(item => item.maxAmount)) : 0
    },

    /**
     * 计算最低保费
     */
    minPremium() {
      return this.amountStatistics.length > 0 ? Math.min(...this.amountStatistics.map(item => item.minAmount)) : 0
    }
  },

  mounted() {
    this.loadData()
  },

  watch: {
    queryForm: {
      handler(newVal) {
        if (newVal && Object.keys(newVal).length > 0) {
          this.loadData()
        }
      },
      deep: true,
      immediate: false
    }
  },

  beforeDestroy() {
    // 销毁图表实例
    if (this.typePieChart) {
      this.typePieChart.dispose()
    }
    if (this.amountBarChart) {
      this.amountBarChart.dispose()
    }
  },

  methods: {
    /**
     * 加载报表数据
     */
    async loadData() {
      try {
        this.$emit('loading', true)
        
        // 模拟API调用，实际使用时替换为真实API
        const response = await this.$http.get('/api/report/insurance/statistics', {
          params: this.getQueryParams()
        })
        
        if (response.data.code === 200) {
          const data = response.data.data
          this.overallPurchaseRate = data.purchaseRate && data.purchaseRate.overallRate || 0
          this.regionPurchaseRates = data.purchaseRate && data.purchaseRate.regionRates || []
          this.insuranceTypeDistribution = data.typeDistribution || []
          this.amountStatistics = data.amountStatistics || []
          this.expiringInsuranceList = data.expirationReminder && data.expirationReminder.expiring || []
          this.expiredInsuranceList = data.expirationReminder && data.expirationReminder.expired || []
          
          // 初始化图表
          this.$nextTick(() => {
            this.initCharts()
          })
        } else {
          this.$message.error('获取数据失败：' + response.data.msg)
        }
      } catch (error) {
        console.error('加载保险购买统计数据失败：', error)
        this.$message.error('加载数据失败，请稍后重试')
        
        // 模拟数据，开发时使用
        this.loadMockData()
      } finally {
        this.$emit('loading', false)
      }
    },

    /**
     * 获取查询参数
     */
    getQueryParams() {
      return {
        ...this.queryForm
      }
    },

    /**
     * 重新加载数据
     */
    reloadData() {
      this.loadData()
    },

    /**
     * 刷新数据
     */
    refreshData() {
      this.loadData()
      this.$message.success('数据已刷新')
    },
    
    /**
     * 获取导出数据
     */
    getExportData() {
      return {
        overallPurchaseRate: this.overallPurchaseRate,
        regionPurchaseRates: this.regionPurchaseRates,
        insuranceTypeDistribution: this.insuranceTypeDistribution,
        amountStatistics: this.amountStatistics,
        expiringInsuranceList: this.expiringInsuranceList,
        expiredInsuranceList: this.expiredInsuranceList,
        queryParams: this.getQueryParams()
      }
    },

    /**
     * 初始化图表
     */
    initCharts() {
      this.initTypePieChart()
      this.initAmountBarChart()
    },

    /**
     * 初始化保险类型饼图
     */
    initTypePieChart() {
      const chartDom = this.$refs.typePieChart
      if (!chartDom) return
      
      this.typePieChart = echarts.init(chartDom)
      
      const option = {
        title: {
          text: '保险类型分布',
          left: 'center',
          textStyle: {
            fontSize: 14,
            color: '#303133'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}单 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle'
        },
        series: [
          {
            name: '保险类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.insuranceTypeDistribution.map(item => ({
              name: item.typeName,
              value: item.purchaseCount
            }))
          }
        ],
        color: ['#67C23A', '#409EFF', '#E6A23C', '#F56C6C', '#909399']
      }
      
      this.typePieChart.setOption(option)
    },

    /**
     * 初始化金额统计柱状图
     */
    initAmountBarChart() {
      const chartDom = this.$refs.amountBarChart
      if (!chartDom) return
      
      this.amountBarChart = echarts.init(chartDom)
      
      const option = {
        title: {
          text: '保费金额分布',
          left: 'center',
          textStyle: {
            fontSize: 14,
            color: '#303133'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const data = params[0]
            return `${data.name}<br/>校区数: ${data.value}个<br/>平均保费: ¥${data.data.avgAmount && data.data.avgAmount.toLocaleString()}`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.amountStatistics.map(item => item.range),
          axisLabel: {
            interval: 0,
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          name: '校区数量'
        },
        series: [
          {
            name: '校区数量',
            type: 'bar',
            data: this.amountStatistics.map(item => ({
              name: item.range,
              value: item.campusCount,
              avgAmount: item.avgAmount
            })),
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#67C23A' },
                { offset: 1, color: '#409EFF' }
              ])
            },
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      }
      
      this.amountBarChart.setOption(option)
    },

    /**
     * 获取购买率标签类型
     */
    getRateTagType(rate) {
      if (rate >= 95) return 'success'
      if (rate >= 85) return 'warning'
      return 'danger'
    },

    /**
     * 获取购买率状态文本
     */
    getRateStatusText(rate) {
      if (rate >= 95) return '优秀'
      if (rate >= 85) return '良好'
      return '待提升'
    },

    /**
     * 获取进度条颜色
     */
    getProgressColor(rate) {
      if (rate >= 95) return '#67C23A'
      if (rate >= 85) return '#E6A23C'
      return '#F56C6C'
    },

    /**
     * 获取保险类型颜色
     */
    getTypeColor(typeCode) {
      const colorMap = {
        property: '#67C23A',
        liability: '#409EFF',
        accident: '#E6A23C',
        comprehensive: '#F56C6C'
      }
      return colorMap[typeCode] || '#909399'
    },

    /**
     * 获取剩余天数标签类型
     */
    getRemainingDaysType(days) {
      if (days <= 7) return 'danger'
      if (days <= 30) return 'warning'
      return 'info'
    },

    /**
     * 格式化金额
     */
    formatAmount(amount) {
      if (!amount || amount === 0) return '0'
      return amount.toLocaleString()
    },

    /**
     * 处理续保
     */
    handleRenewal(row) {
      this.renewalForm = {
        campusName: row.campusName,
        insuranceType: row.insuranceType,
        duration: '1',
        premiumAmount: row.premiumAmount || 0
      }
      this.renewalDialogVisible = true
    },

    /**
     * 处理联系
     */
    handleContact(row) {
      this.$message.info(`正在联系 ${row.contactPerson}，电话：${row.contactPhone}`)
    },

    /**
     * 提交续保
     */
    async submitRenewal() {
      try {
        // 模拟API调用
        const response = await this.$http.post('/api/insurance/renewal', this.renewalForm)
        
        if (response.data.code === 200) {
          this.$message.success('续保成功')
          this.renewalDialogVisible = false
          this.refreshData()
        } else {
          this.$message.error('续保失败：' + response.data.msg)
        }
      } catch (error) {
        console.error('续保失败：', error)
        this.$message.error('续保失败，请稍后重试')
      }
    },

    /**
     * 刷新数据
     */
    refreshData() {
      this.loadData()
      this.$message.success('数据已刷新')
    },

    /**
     * 导出数据
     */
    exportData() {
      this.$emit('export', {
        type: 'insurance',
        data: {
          overallPurchaseRate: this.overallPurchaseRate,
          regionPurchaseRates: this.regionPurchaseRates,
          insuranceTypeDistribution: this.insuranceTypeDistribution,
          amountStatistics: this.amountStatistics,
          expiringInsuranceList: this.expiringInsuranceList,
          expiredInsuranceList: this.expiredInsuranceList
        }
      })
    },

    /**
     * 加载模拟数据（开发时使用）
     */
    loadMockData() {
      // 模拟总体购买率
      this.overallPurchaseRate = 92

      // 模拟区域购买率数据
      this.regionPurchaseRates = [
        {
          regionId: 1,
          regionName: '华东大区',
          totalCampusCount: 45,
          purchasedCampusCount: 42,
          purchaseRate: 93
        },
        {
          regionId: 2,
          regionName: '华南大区',
          totalCampusCount: 38,
          purchasedCampusCount: 35,
          purchaseRate: 92
        },
        {
          regionId: 3,
          regionName: '华北大区',
          totalCampusCount: 52,
          purchasedCampusCount: 48,
          purchaseRate: 92
        },
        {
          regionId: 4,
          regionName: '西南大区',
          totalCampusCount: 28,
          purchasedCampusCount: 25,
          purchaseRate: 89
        }
      ]

      // 模拟保险类型分布数据
      this.insuranceTypeDistribution = [
        {
          typeCode: 'property',
          typeName: '财产险',
          purchaseCount: 68,
          totalAmount: 850000,
          percentage: 42
        },
        {
          typeCode: 'liability',
          typeName: '责任险',
          purchaseCount: 45,
          totalAmount: 675000,
          percentage: 28
        },
        {
          typeCode: 'accident',
          typeName: '意外险',
          purchaseCount: 32,
          totalAmount: 320000,
          percentage: 20
        },
        {
          typeCode: 'comprehensive',
          typeName: '综合险',
          purchaseCount: 16,
          totalAmount: 480000,
          percentage: 10
        }
      ]

      // 模拟金额统计数据
      this.amountStatistics = [
        {
          range: '<1万',
          campusCount: 25,
          minAmount: 2000,
          maxAmount: 9500,
          avgAmount: 5800
        },
        {
          range: '1-3万',
          campusCount: 45,
          minAmount: 10000,
          maxAmount: 29500,
          avgAmount: 18500
        },
        {
          range: '3-5万',
          campusCount: 32,
          minAmount: 30000,
          maxAmount: 48500,
          avgAmount: 38500
        },
        {
          range: '5-10万',
          campusCount: 28,
          minAmount: 50000,
          maxAmount: 98500,
          avgAmount: 68500
        },
        {
          range: '>10万',
          campusCount: 12,
          minAmount: 100000,
          maxAmount: 250000,
          avgAmount: 158000
        }
      ]

      // 模拟即将到期保险列表
      this.expiringInsuranceList = [
        {
          campusName: '上海浦东校区',
          insuranceType: '财产险',
          policyNumber: 'PIC202401001',
          coverageAmount: 500000,
          premiumAmount: 15000,
          expirationDate: '2025-02-15',
          remainingDays: 26
        },
        {
          campusName: '深圳南山校区',
          insuranceType: '责任险',
          policyNumber: 'PIC202401002',
          coverageAmount: 300000,
          premiumAmount: 12000,
          expirationDate: '2025-02-20',
          remainingDays: 31
        },
        {
          campusName: '北京朝阳校区',
          insuranceType: '综合险',
          policyNumber: 'PIC202401003',
          coverageAmount: 800000,
          premiumAmount: 25000,
          expirationDate: '2025-02-28',
          remainingDays: 39
        }
      ]

      // 模拟已到期保险列表
      this.expiredInsuranceList = [
        {
          campusName: '广州天河校区',
          insuranceType: '意外险',
          policyNumber: 'PIC202401004',
          expirationDate: '2025-01-10',
          overdueDays: 10,
          contactPerson: '张校长',
          contactPhone: '13800138000'
        },
        {
          campusName: '杭州西湖校区',
          insuranceType: '财产险',
          policyNumber: 'PIC202401005',
          expirationDate: '2025-01-05',
          overdueDays: 15,
          contactPerson: '李主任',
          contactPhone: '13900139000'
        }
      ]

      // 初始化图表
      this.$nextTick(() => {
        this.initCharts()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.insurance-report {
  .report-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }

  .header-actions {
    display: flex;
    gap: 10px;
  }

  .statistics-section {
    margin-bottom: 30px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .section-title {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 3px solid #67C23A;
  }

  .rate-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  .rate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }

  .rate-title {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
  }

  .rate-value {
    margin: 15px 0;
  }

  .rate-number {
    font-size: 32px;
    font-weight: bold;
    color: #303133;
  }

  .rate-unit {
    font-size: 16px;
    color: #909399;
    margin-left: 5px;
  }

  .rate-progress {
    display: flex;
    justify-content: center;
  }

  .region-rate-list {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .region-rate-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }

  .region-info {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
  }

  .region-name {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
  }

  .region-count {
    font-size: 12px;
    color: #909399;
    margin-top: 2px;
  }

  .region-progress {
    flex: 1;
    margin: 0 15px;
  }

  .region-stats {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .purchased-count {
    font-size: 14px;
    color: #67C23A;
    font-weight: 500;
  }

  .rate-text {
    font-size: 12px;
    color: #909399;
    margin-top: 2px;
  }

  .chart-container {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .type-statistics {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .type-item {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .type-name {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
  }

  .type-amount {
    font-size: 14px;
    color: #67C23A;
    font-weight: 500;
  }

  .type-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    color: #909399;
  }

  .type-count {
    font-weight: 500;
  }

  .type-rate {
    font-weight: 500;
  }

  .amount-chart {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .amount-summary {
    background: linear-gradient(135deg, #f6ffed 0%, #f0ffe6 100%);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e8f5e8;

    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
  }

  .summary-label {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
  }

  .summary-value {
    font-size: 16px;
    color: #67C23A;
    font-weight: bold;
  }

  .el-tabs--card {
    ::v-deep .el-tabs__header {
      margin-bottom: 20px;
    }
  }

  .dialog-footer {
    text-align: right;
    padding-top: 20px;
  }
}
</style>